<template>
  <ApolloQuery :query="require('@/graphql/Query/Index.graphql')">
    <template slot-scope="{ result: { loading, error, data } }">
      <!-- Loading -->
      <div v-if="loading" class="loading apollo">Loading...</div>

      <!-- Error -->
      <div v-else-if="error" class="error apollo">An error occured</div>

      <!-- Result -->
      <div v-else-if="data" class="result apollo">
        <v-layout class="grey lighten-3" justify-start align-start>
          <carousel-3d autoplay :autoplayTimeout="5000" autoplayHoverPause controlsVisible :disable3d="$vuetify.breakpoint.smAndDown" :space="$vuetify.breakpoint.smAndDown ? 365 : 'auto'" :border="$vuetify.breakpoint.smAndDown ? 0 : 1" :style="$vuetify.breakpoint.smAndDown ? 'margin-top: 0;' : ''">
            <slide v-for="(item, i) in data.products" :index="i" :key="i">
              <template slot-scope="{ index, isCurrent, leftIndex, rightIndex }">
                <router-link v-if="isCurrent" :to="`/products/${item.id}`">
                  <v-img :src="item.covers[0] | withCDN" :aspect-ratio="4/3">
                    <v-layout align-end justify-start row fill-height>
                      <div class="pa-3" style="width: 100%; background-color: rgba(0, 0, 0, 0.3);">
                        <span class="white--text headline">{{ item.name }}</span>
                      </div>
                    </v-layout>
                  </v-img>
                </router-link>
                <v-img v-else :src="item.covers[0] | withCDN" :aspect-ratio="4/3">
                  <v-layout align-end justify-start row fill-height>
                    <span class="headline">{{ item.name }}</span>
                  </v-layout>
                </v-img>
              </template>
            </slide>
          </carousel-3d>
        </v-layout>
        <v-container>
          <v-layout wrap>
            <v-chip v-for="(item, index) in data.categories" :key="index" label color="pink" text-color="white">
              <v-icon left>label</v-icon>{{ item.name }}
            </v-chip>
          </v-layout>
        </v-container>
        <v-container fluid grid-list-lg>
          <v-layout row wrap>
            <v-flex v-for="(item, index) in data.products" :key="index" xs12 sm6 md4 lg4 xl3>
              <v-card>
                <router-link :to="`/products/${item.id}`">
                  <v-img :src="item.covers[1] | withCDN" :aspect-ratio="16/9"></v-img>
                </router-link>

                <v-card-title primary-title>
                  <div>
                    <h3 class="headline mb-0">{{ item.name }}</h3>
                    <div>{{ item.description }}</div>
                  </div>
                </v-card-title>

                <v-card-actions>
                  <v-btn flat color="orange">详情</v-btn>
                  <v-btn flat color="orange">预约</v-btn>
                </v-card-actions>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </div>

      <!-- No result -->
      <div v-else class="no-result apollo">
        <Skeleton></Skeleton>
      </div>

    </template>
  </ApolloQuery>
</template>

<script>
import { Carousel3d, Slide } from 'vue-carousel-3d'

import Skeleton from '@/components/Skeleton'

export default {
  name: 'home',
  data () {
    return {
    }
  },
  components: {
    Carousel3d,
    Slide,
    Skeleton
  },
  props: [
    'id'
  ]
}
</script>

<style>
a {
  text-decoration: none;
}
</style>
